import React, { forwardRef } from 'react';
import './index.scss';

export interface PointStatItem {
  /**
   * 点位名称
   */
  label: string;
  
  /**
   * 点位数量
   */
  value: number;
  
  /**
   * 图标路径（可选）
   */
  icon?: string;
}

export interface PointSummaryProps {
  /**
   * 组件标题
   */
  title?: string;
  
  /**
   * 英文标题
   */
  englishTitle?: string;
  
  /**
   * 点位数据 - 第一行
   */
  firstRowData?: PointStatItem[];
  
  /**
   * 点位数据 - 第二行
   */
  secondRowData?: PointStatItem[];
  
  /**
   * 点击事件
   */
  onClick?: () => void;
  
  /**
   * 点击某个点位项
   */
  onItemClick?: (item: PointStatItem) => void;
  
  /**
   * 自定义样式
   */
  style?: React.CSSProperties;
  
  /**
   * 自定义类名
   */
  className?: string;
  
  // 低代码平台相关属性
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const PointSummary = forwardRef<HTMLDivElement, PointSummaryProps>((props, ref) => {
  const {
    title = '点位汇总',
    englishTitle = 'Point summary',
    firstRowData = [
      { label: '消防重点区域', value: 20, icon: 'http://localhost:8085/static/images/消防重点区域.png' },
      { label: '服务点位', value: 20, icon: 'http://localhost:8085/static/images/服务点位.png' },
      { label: '易积水点', value: 15, icon: 'http://localhost:8085/static/images/易积水点.png' },
      { label: '平安哨', value: 20, icon: 'http://localhost:8085/static/images/平安哨.png' }
    ],
    secondRowData = [
      { label: '消杀点', value: 99, icon: 'http://localhost:8085/static/images/消杀点.png' },
      { label: '易滑倒点位', value: 36, icon: 'http://localhost:8085/static/images/易滑倒点位.png' },
      { label: '易受风点', value: 2, icon: 'http://localhost:8085/static/images/易受风点.png' },
      { label: '地下出入口', value: 99, icon: 'http://localhost:8085/static/images/地下出入口.png' }
    ],
    onClick,
    onItemClick,
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const handleClick = () => {
    onClick?.();
  };

  const handleItemClick = (item: PointStatItem) => {
    onItemClick?.(item);
  };

  const componentClassName = [
    'hzdz-point-summary',
    className
  ].filter(Boolean).join(' ');

  // 格式化数值显示
  const formatValue = (value: number): string => {
    return value.toString();
  };

  // 渲染单个点位项
  const renderPointItem = (item: PointStatItem, index: number) => (
    <div 
      key={index} 
      className="hzdz-point-summary__item"
      onClick={() => handleItemClick(item)}
    >
      <div className="hzdz-point-summary__item-label">{item.label}</div>
      <div className="hzdz-point-summary__item-value">{formatValue(item.value)}</div>
    </div>
  );

  return (
    <div
      ref={ref}
      className={componentClassName}
      style={style}
      onClick={handleClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 顶部标题栏 */}
      <div className="hzdz-point-summary__header">
        <div className="hzdz-point-summary__header-content">
          <div className="hzdz-point-summary__title">{title}</div>
          <div className="hzdz-point-summary__english-title">{englishTitle}</div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="hzdz-point-summary__content">
        {/* 第一行点位数据 */}
        <div className="hzdz-point-summary__row">
          {firstRowData.map((item, index) => renderPointItem(item, index))}
        </div>

        {/* 第二行点位数据 */}
        <div className="hzdz-point-summary__row">
          {secondRowData.map((item, index) => renderPointItem(item, index))}
        </div>
      </div>
    </div>
  );
});

PointSummary.displayName = 'PointSummary';

export default PointSummary;